<%@ page language="java" contentType="text/html; charset=UTF-8"	pageEncoding="UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>
<%-- <%@ include file="/common/links.jsp"%> --%>


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
/* .ui-button { display: inline-block; position: relative; outline:yellow;outline-width:5px; border:4px; padding: 1px; margin: 1px; text-decoration: none !important; cursor: pointer; text-align: center; zoom: 1; overflow: visible; } /* the overflow property removes extra width in IE */
 */
  @media print {
    .non-printable, .fancybox-outer { display: none; }
    .printable, #printDiv { 
        display: block; 
        font-size: 26pt;
    }
</style>
  <script type="text/javascript">
    //<![CDATA[

			function PrintElem(elem) {
				//Popup($(elem).html());
				try {
					document.forms["printForm"].csvBuffer.value = $(elem).html();
					document.forms["printForm"].method = 'POST';
					document.forms["printForm"].action = 'demoEntityPrint'; // send it to server which will open this contents in excel file
					document.forms["printForm"].target = '_blank';
					document.forms["printForm"].submit();
				} catch (e) {
					alert(e.message);
				}
			}

		
			function Popup(data) {
				var mywindow = window.open('', 'my div');

				mywindow.document.write('<html><head><title>my div</title>');
				mywindow.document
						.write('<link rel="stylesheet" type="text/css"	href="/scripts/jqueryui/css/hot-sneaks/jquery-ui.css"/>');
				mywindow.document
						.write('<link rel="stylesheet" type="text/css" href="/scripts/jquerylayout/layout-default-latest.css"/>');
				mywindow.document
						.write('<link rel="stylesheet" type="text/css" href="/scripts/jqgrid/css/ui.jqgrid.css"/>');
				mywindow.document
						.write('<link rel="stylesheet" type="text/css" href="/scripts/styles.css"/>');
				/*optional stylesheet*///mywindow.document.write('<link rel="stylesheet" href="main.css" type="text/css" />');
				mywindow.document.write('</head><body >');
				mywindow.document.write(data);
				mywindow.document.write('</body></html>');

				mywindow.print();
				//mywindow.close();

				return true;
			}

			function printContents(id) {
				var contents = $("#" + id).html();

				if ($("#printDiv").length == 0) {
					var printDiv = null;
					printDiv = document.createElement('div');
					printDiv.setAttribute('id', 'printDiv');
					printDiv.setAttribute('class', 'printable');
					$(printDiv).appendTo('body');
				}

				$("#printDiv").html(contents);

				window.print();

				$("#printDiv").remove();

			}
			function exportExcel() {
				var mya = new Array();
				mya = $("#list").getDataIDs(); // Get All IDs
				var data = $("#list").getRowData(mya[0]); // Get First row to get the labels
				var colNames = new Array();
				var ii = 0;
				for ( var i in data) {
					colNames[ii++] = i;
				} // capture col names
				var html = "";
				for (i = 0; i < mya.length; i++) {
					data = $("#list").getRowData(mya[i]); // get each row
					for (j = 0; j < colNames.length; j++) {
						html = html + data[colNames[j]] + "\t"; // output each column as tab delimited
					}
					html = html + "\n"; // output each row with end of line

				}
				html = html + "\n"; // end of line at the end
				//alert(html);
				try {
					document.forms["csvExportForm"].csvBuffer.value = html;
					document.forms["csvExportForm"].method = 'POST';
					document.forms["csvExportForm"].action = 'demoEntityExport'; // send it to server which will open this contents in excel file
					document.forms["csvExportForm"].target = '_blank';
					document.forms["csvExportForm"].submit();
				} catch (e) {
					alert(e.message);
				}
			}

			var gridIdString = "#list";
			function gridReload(gridId) {
				var urlString = "demoEntityGrid";
				var groupon = jQuery("#groupon_").val();
				var groupon = jQuery('input[name="groupon_"]').filter(
						':checked').val();
				if (jQuery.type(groupon) === "undefined"
						|| jQuery.type(groupon) === "null")
					groupon = "and";
				var stringField = jQuery("#stringField").val();
				//var intObjField = jQuery("#intObjField").val();

				urlString = urlString + "?groupon_=" + groupon
						+ "&filter_LIKE_stringField=" + stringField;
				// + "&filter_LIKE_dictionary.name=" + dictionaryName;
				urlString = encodeURI(urlString);
				//alert(urlString);
				jQuery("#" + gridId).jqGrid('setGridParam', {
					url : urlString,
					page : 1
				}).trigger("reloadGrid");
			}

			function resizeGrid(tgrid) {
				//alert("resize");
				var container = tgrid.parents('.grid_container:first');
				var cw = container.width();
				var ch = container.height();
				var ph = container.find(".ui-jqgrid-pager").height();
				var th = container.find(".ui-jqgrid-titlebar").height();
				var hh = container.find(".ui-jqgrid-hdiv").height();
				if (th > 5)
					th = th + 8
				tgrid.jqGrid('setGridWidth', cw - 2, 'true');
				tgrid.jqGrid('setGridHeight', ch - ph - th - hh, 'true');
			}
			function toolbarInit() {
				jQuery(function() {
					jQuery("#addRecord").button({
						text : true,
						icons : {
							primary : "ui-icon-document"
						}
					}).click(function() {
						addNewRecord('editEntity', 'list', '500', '800');
					});
					jQuery("#modifyRecord").button({
						text : true,
						icons : {
							primary : "ui-icon-pencil"
						}
					}).click(
							function() {
								editRecord('editEntity', 'list', 'modelId',
										'500', '800');
							});
					jQuery("#deleteRecords").button({
						text : true,
						icons : {
							primary : "ui-icon-scissors"
						}
					}).click(function() {
						deleteRecords("deleteEntity", "list");
					});
					$('#searchArea')
							.button({
								text : true,
								icons : {
									primary : "ui-icon-arrowthick-1-s"
								},
								label : "<s:text name='button.show' />"
							})
							.click(
									function() {
										var options;
										if ($(this).text() === "<s:text name='button.show' />") {
											options = {
												label : "<s:text name='button.hide' />",
												icons : {
													primary : "ui-icon-arrowthick-1-n"
												}
											};
										} else {
											options = {
												label : "<s:text name='button.show' />",
												icons : {
													primary : "ui-icon-arrowthick-1-s"
												}
											};
										}
										$(this).button("option", options);
										$(".searchBar").toggle("blind", 10,
												function() {
													innerlayout.resizeAll();
												});

									});
					$('#mainLayoutToggle')
					.button({
						text : true,
						icons : {
							primary : "ui-icon-arrowthick-1-s"
						},
						label : "隐藏北西南"
					})
					.click(
							function() {
								var options;
								if ($(this).text() === "显示北西南") {
									options = {
										label : "隐藏北西南",
										icons : {
											primary : "ui-icon-arrowthick-1-n"
										}
									};
									
									mainLayout.show('north');
									mainLayout.show('west');
									mainLayout.show('south');
									
								} else {
									options = {
										label : "显示北西南",
										icons : {
											primary : "ui-icon-arrowthick-1-s"
										}
									};
									mainLayout.hide('north');
									mainLayout.hide('west');
									mainLayout.hide('south');
								}
								$(this).button("option", options);

							});
					

				});
			}

			jQuery(document)
					.ready(
							function() {
								innerlayout = jQuery(
										mainLayout.options.center.paneSelector)
										.layout(
												{
													applyDemoStyles : false,
													center__paneSelector : "#inter_center",
													center__contentSelector : ".ui-layout-content"
												});

								toolbarInit();

								grid = jQuery(gridIdString);

								grid
										.jqGrid({
											url : "demoEntityGrid",
											datatype : "json",
											mtype : "GET",
											colModel : [
													{
														name : 'demoId',
														index : 'id',
														align : 'center',
														label : '<s:text name="demoEntity.demoId" />',
														hidden : false,
														key : true
													},
													{
														name : 'intField',
														index : 'intField',
														align : 'center',
														label : '<s:text name="demoEntity.intField" />',
														sorttype : 'int',
														editable : true,
														editrules : {
															number : true
														}
													},
													{
														name : 'longField',
														index : 'longField',
														align : 'center',
														label : '<s:text name="demoEntity.longField" />'
													},
													{
														name : 'shortField',
														index : 'shortField',
														align : 'center',
														label : '<s:text name="demoEntity.shortField" />'
													},
													{
														name : 'booleanField',
														index : 'booleanField',
														align : 'center',
														label : '<s:text name="demoEntity.booleanField" />',
														editable : true
													},
													{
														name : 'charField',
														index : 'charField',
														align : 'center',
														label : '<s:text name="demoEntity.charField" />',
														editable : true
													},
													{
														name : 'floatField',
														index : 'floatField',
														align : 'center',
														label : '<s:text name="demoEntity.floatField" />',
														editable : true
													},
													{
														name : 'doubleField',
														index : 'doubleField',
														align : 'center',
														label : '<s:text name="demoEntity.doubleField" />',
														editable : true
													},
													{
														name : 'byteField',
														index : 'byteField',
														align : 'center',
														label : '<s:text name="demoEntity.byteField" />',
														editable : true
													},
													{
														name : 'intObjField',
														index : 'intObjField',
														align : 'center',
														label : '<s:text name="demoEntity.intObjField" />',
														editable : true
													},
													{
														name : 'longObjField',
														index : 'longObjField',
														align : 'center',
														label : '<s:text name="demoEntity.longObjField" />',
														editable : true
													},
													{
														name : 'shortObjField',
														index : 'shortObjField',
														align : 'center',
														label : '<s:text name="demoEntity.shortObjField" />',
														editable : true
													},
													{
														name : 'byteObjField',
														index : 'byteObjField',
														align : 'center',
														label : '<s:text name="demoEntity.byteObjField" />',
														editable : true
													},
													{
														name : 'booleanObjField',
														index : 'booleanObjField',
														align : 'center',
														label : '<s:text name="demoEntity.booleanObjField" />',
														editable : true
													},
													{
														name : 'charObjField',
														index : 'charObjField',
														align : 'center',
														label : '<s:text name="demoEntity.charObjField" />',
														editable : true
													},
													{
														name : 'floatObjField',
														index : 'floatObjField',
														align : 'center',
														label : '<s:text name="demoEntity.floatObjField" />',
														editable : true
													},
													{
														name : 'doubleObjField',
														index : 'doubleObjField',
														align : 'center',
														label : '<s:text name="demoEntity.doubleObjField" />',
														editable : true
													},
													{
														name : 'dateField',
														index : 'dateField',
														align : 'center',
														label : '<s:text name="demoEntity.dateField" />',
														editable : true
													},
													{
														name : 'stringField',
														index : 'stringField',
														align : 'center',
														label : '<s:text name="demoEntity.stringField" />',
														editable : true
													},
													{
														name : 'bigDecimalField',
														index : 'bigDecimalField',
														align : 'center',
														label : '<s:text name="demoEntity.bigDecimalField" />',
														editable : true
													},
													{
														name : 'timestampField',
														index : 'timestampField',
														align : 'center',
														label : '<s:text name="demoEntity.timestampField" />',
														editable : true
													} ],
											jsonReader : {
												root : "pageList", // (2)
												page : "page",
												total : "total",
												records : "records", // (3)
												repeatitems : false
											// (4)
											},
											rowNum : 10,
											rowList : [ 5, 10, 20, 50, 100, 200 ],
											pager : '#pager',
											gridview : true,
											rownumbers : true,
											sortname : 'demoId',
											viewrecords : true,
											sortorder : 'desc',
											// caption:'<s:text name="demoEntityList.title" />',
											height : 300,
											autowidth : true,
											shrinkToFit : true,
											// loadui: "disable",
											multiselect : true,

											multiboxonly : true,
											hidegrid : false,
											onSelectRow : function(rowid) {
											},
											gridComplete : function() {
												if (jQuery(this).getDataIDs().length > 0) {
													jQuery(this)
															.jqGrid(
																	'setSelection',
																	jQuery(this)
																			.getDataIDs()[0]);//默认选中第一行
												}
											},
											loadComplete : function() {
												resizeGrid(jQuery(this));
											}

										});

								jQuery(grid).jqGrid('bindKeys');

								jQuery(grid).jqGrid('navGrid', '#pager', {
									edit : false,
									add : false,
									del : false,
									excel : true
								}, {}, {}, {}, {
									multipleSearch : true,
									multipleGroup : true
								});
								jQuery(grid).jqGrid('navButtonAdd', '#pager', {
									caption : "导出Excel",
									buttonicon : "ui-icon-save",
									onClickButton : function() {
										exportExcel();
									},
									position : "last"
								});
								jQuery(grid).jqGrid('navButtonAdd', '#pager', {
									caption : "打印列表数据",
									buttonicon : "ui-icon-edit",
									onClickButton : function() {
										/* jQuery(grid).jqGrid('excelExport', {
											"url" : "demoEntityGrid"
										}); */

										//printContents("list");
										PrintElem("#grid-container");
									},
									position : "last"
								});

								$("#grid-container").bind("resize", function() {
									resizeGrid($("#list"));
								});
								//jQuery( "button" ).button();

								$("#inter_center").find(':button').each(
										function() {
											jQuery(this).button();
										});

								$("#searchBarDiv > select, input").bind(
										" change", function() {
											$("#gridSearch").focus();
										});

							});
		</script>
</head>
<body>
<form id="csvExportForm">
<input type="hidden" name="csvBuffer"/>
</form>
<form id="printForm">
<input type="hidden" name="csvBuffer"/>
</form>

	<div id="inter_center" class="ui-layout-pane-inter-center">
	<div class="searchBar ui-state-default" id="searchBarDiv">
		<input type="text" id="stringField" >
			<!-- <input type="text" id="intObjField" > -->
			<input type="radio" id="groupon_"  name="groupon_" value="and"><s:text name="lable.and" /></input><input type="radio" id="groupon_" name="groupon_" value="or"><s:text name="lable.or" /></input>
			<button id="gridSearch" type="button" onclick="gridReload('list')"><s:text name="button.search" /></button>
			<button type="button" onclick="clear_input_elements('searchBarDiv');gridReload('list')"><s:text name="button.clean" /></button>
	</div>
		<div class="toolBar ui-state-default" >
				<button id='addRecord'>
					<s:text name='button.new' />
				</button>
				<button id='modifyRecord'>
					<s:text name='button.modify' />
				</button>
				<button id='deleteRecords'>
					<s:text name='button.delete' />
				</button>
				<button id='mainLayoutToggle' style="float: right;"></button>
				<button id='searchArea' style="float: right;"></button>
				

		</div>
		<div id="grid-container" class="ui-layout-content grid_container" >
			<table id="list"></table>
			<div id="pager"></div>
		</div>
		<!-- <div class="footer  ui-state-default"><p>footer</p></div> -->
	</div>

</body></html>